<template>
    <div class="wrapper">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 用户列表区域 -->
        <el-card class="box-card">
            <!-- 搜索 -->
            <el-input placeholder="请输入订单编号" v-model="searchText" class="inputWidth" clearable>
                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>

            <!-- 表格 -->
            <el-table :data="orderListData.goods" style="width: 100%" border>
                <el-table-column type="index" label="序号" width="60">
                </el-table-column>
                <el-table-column prop="order_number" label="订单编号">
                </el-table-column>
                <el-table-column prop="order_price" label="订单价格" width="150">
                </el-table-column>

                <el-table-column label="是否付款" width="150">
                    <template v-slot="scope">
                        <el-tag type="success" v-if="scope.row.order_pay === '1'">已付款</el-tag>
                        <el-tag type="warning" v-else>未付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="is_send" label="是否发货" width="130">
                </el-table-column>
                <el-table-column label="下单时间">
                    <template slot-scope="scope">
                        {{hanldeTime(scope.row.create_fime)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <el-button type="primary" icon="el-icon-edit" size="small" @click="addressData.dialog = true">地址</el-button>
                    <el-button type="success" icon="el-icon-location" size="small" @click="logistics.dialogVisible = true">物流</el-button>
                </el-table-column>
            </el-table>

            <!-- 分页功能 -->
            <el-pagination 
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange" 
                :current-page="orderListData.pagenum" 
                :page-sizes="[5, 10, 20, 30]" 
                :page-size="orderListParams.pagesize" 
                layout="total, sizes, prev, pager, next, jumper" 
                :total="orderListData.total">
            </el-pagination>
        </el-card>

        <!-- 地址 -->
        <el-dialog title="地址修改" :visible.sync="addressData.dialog" width="50%">
            <el-form :model="addressData.ruleForm" :rules="addressData.rules" label-width="130px" ref='modifyAddress'>
                <el-form-item label="请输入地址" prop="diqu">
                    <el-cascader v-model="addressData.ruleForm.diqu" :options="addressData.data" :props="{ expandTrigger: 'hover' }">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="请输入详细地址" prop="xiangxidizhi">
                    <el-input v-model="addressData.ruleForm.xiangxidizhi"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addressData.dialog = false;clearAddressData()">取 消</el-button>
                <el-button type="primary" @click="addressData.dialog = false;checkModifyAddress()">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 物流 -->
        <el-dialog title="物流进度" :visible.sync="logistics.dialogVisible" width="45%">

            <el-timeline>
                <el-timeline-item v-for="(activity, index) in logistics.data" :key="index" :timestamp="activity.timestamp">
                    <span>{{activity.context}}</span>
                    <br>
                    <span class="time">{{activity.time}}</span>
                </el-timeline-item>
            </el-timeline>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="logistics.dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import dayjs from "dayjs";
import cityData from "../../assets/cityData/city_data2017_element.js";
export default {
    name: "Orders",
    data() {
        return {
            // 订单列表参数
            orderListParams: {
                query: "", //查询参数
                pagenum: 1, //当前页码
                pagesize: 5, //每页显示的条数
                user_id: "", //用户ID
                pay_status: "", //支付状态
                is_send: "", //是否发货
                order_fapiao_title: "", //['个人','公司']
                order_fapiao_company: "", //公司名称
                order_fapiao_content: "", //发票内容
                consignee_addr: "", //发货地址
            },
            // 搜索
            searchText: "",
            // 订单列表数据
            orderListData: {
                goods: [], //订单列表数据
                pagenum: 0, //当前页码
                total: 0, //数据总条数
            },
            // 地址数据
            addressData: {
                dialog: false,
                data: cityData,
                value: "",
                rules: {
                    //校验
                    diqu: [
                        {
                            required: true,
                            message: "请选择地区",
                            trigger: "blur",
                        },
                    ],
                    xiangxidizhi: [
                        {
                            required: true,
                            message: "请输入详细地址",
                            trigger: "blur",
                        },
                    ],
                },
                ruleForm: {
                    diqu: "",
                    xiangxidizhi: "",
                },
            },
            // 物流数据
            logistics: {
                dialogVisible: false,
                data: [
                    {
                        time: "2018-05-10 09:39:00",
                        ftime: "2018-05-10 09:39:00",
                        context: "已签收,感谢使用顺丰,期待再次为您服务",
                        location: "",
                    },
                    {
                        time: "2018-05-10 08:23:00",
                        ftime: "2018-05-10 08:23:00",
                        context:
                            "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
                        location: "",
                    },
                    {
                        time: "2018-05-10 07:32:00",
                        ftime: "2018-05-10 07:32:00",
                        context: "快件到达 [北京海淀育新小区营业点]",
                        location: "",
                    },
                    {
                        time: "2018-05-10 02:03:00",
                        ftime: "2018-05-10 02:03:00",
                        context:
                            "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
                        location: "",
                    },
                    {
                        time: "2018-05-09 23:05:00",
                        ftime: "2018-05-09 23:05:00",
                        context: "快件到达 [北京顺义集散中心]",
                        location: "",
                    },
                    {
                        time: "2018-05-09 21:21:00",
                        ftime: "2018-05-09 21:21:00",
                        context:
                            "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
                        location: "",
                    },
                    {
                        time: "2018-05-09 13:07:00",
                        ftime: "2018-05-09 13:07:00",
                        context: "顺丰速运 已收取快件",
                        location: "",
                    },
                    {
                        time: "2018-05-09 12:25:03",
                        ftime: "2018-05-09 12:25:03",
                        context: "卖家发货",
                        location: "",
                    },
                    {
                        time: "2018-05-09 12:22:24",
                        ftime: "2018-05-09 12:22:24",
                        context:
                            "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
                        location: "",
                    },
                    {
                        time: "2018-05-08 21:36:04",
                        ftime: "2018-05-08 21:36:04",
                        context: "商品已经下单",
                        location: "",
                    },
                ],
                meta: { status: 200, message: "获取物流信息成功！" },
            },
        };
    },
    created() {
        this.getOrderList();
    },
    methods: {
        // 获取订单数据列表
        async getOrderList() {
            let { data: res } = await this.$http.get("/Orders", {
                params: this.orderListParams,
            });
            if (res.meta.status !== 200)
                this.$message.error("获取订单列表失败");
            this.orderListData.goods = res.data.goods;
            this.orderListData.pagenum = Number(res.data.pagenum);
            this.orderListData.total = res.data.total;
        },
        // 处理时间戳
        hanldeTime(time) {
            return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
        },
        // 校验并修改地址
        checkModifyAddress() {
            this.$refs.modifyAddress.validate((valid) => {
                if (!valid) {
                    this.$message.error("地址不能为空");
                    this.clearAddressData();
                    return;
                }
                this.$message.success("地址修改成功");
            });
        },
        // 清空修改地址文本框的内容
        clearAddressData() {
            this.$refs.modifyAddress.resetFields();
        },
        // 搜索(无法搜索后台没有api)
        search() {
            this.searchText = "";
            this.getOrderList();
        },
        // 分页功能
        handleSizeChange(value) {
            this.orderListParams.pagesize = value;
            this.getOrderList();
        },
        handleCurrentChange(value) {
            this.orderListParams.pagenum = value;
            this.getOrderList();
        },
    },
};
</script>

<style lang='less' scoped>
.wrapper {
    width: 100%;
    height: 0px;
    padding: 10px 20px;
    box-sizing: border-box;
    .time {
        color: #ccc;
        font-size: 13px;
    }
    .inputWidth {
        width: 300px;
    }
}
</style>